
<template>
	<form @submit='formSubmit'>
		<view class="pages">
			<view class="grant">
				<view class="tit">优惠劵名称：</view>
				<view class="cont">
					<input type="text" v-model="Coupon.title" placeholder="请输入优惠劵名称" placeholder-class="inColor"/>
				</view>
			</view>
			<view class="grant">
				<view class="tit">面额：</view>
				<view class="cont">
					<input type="number" v-model="Coupon.amount" placeholder="请输入优惠劵面额" placeholder-class="inColor"/>
				</view>
			</view>
			<view class="grant">
				<view class="tit">使用门槛：<text>(0为不设置门槛)</text></view>
				<view class="cont">
					<input type="number" v-model="Coupon.use_con" placeholder="请输入优惠劵使用条件" placeholder-class="inColor"/>
				</view>
			</view>
			<view class="grant">
				<view class="tit">发放总数：</view>
				<view class="cont">
					<input type="number" v-model="Coupon.num" placeholder="请设置发放的总数" placeholder-class="inColor"/>
				</view>
			</view>
			<view class="grant">
				<view class="tit">有效期：</view>
				<view class="cont">
					<radio-group @change="v_type">
						<radio  value="1" checked="true" /> 有效天数
						<radio  value="2" /> 固定日期
					</radio-group>
				</view>
			</view>
			<block v-if="Coupon.vtype == 1">
				<view class="grant">
					<view class="tit">有效天数：</view>
					<view class="cont">
						<input type="number" v-model="Coupon.valid_day" placeholder="请设置优惠券有效天数" placeholder-class="inColor"/>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="grant">
					<view class="tit">使用开始时间：</view>
					<view class="cont">
						<picker mode="date" v-model="Coupon.starttime" :start="startDate" :end="endDate" @change="useStart">
							<view class="uni-input">{{Coupon.starttime}}</view>
						</picker>
					</view>
				</view>
				<view class="grant">
					<view class="tit">使用结束时间：</view>
					<view class="cont">
						<picker mode="date" v-model="Coupon.endtime" :start="startDate" :end="endDate" @change="useEnd">
							<view class="uni-input">{{Coupon.endtime}}</view>
						</picker>
					</view>
				</view>
			</block>
			<view class="grant">
				<view class="tit">用户范围：</view>
				<view class="cont">
					<radio-group @change="f_type">
						<radio value="2" checked="true" /> 全部用户可用
						<radio value="1" /> 新用户可用
					</radio-group>
				</view>
			</view>
			<view class="grant">
				<view class="tit">每人限领：<text>(0为不限数量)</text></view>
				<view class="cont">
					<input type="number" v-model="Coupon.limit" placeholder="请设置限领数量" placeholder-class="inColor"/>
				</view>
			</view>
			<!-- <view class="grant">
				<view class="tit">领取开始时间：</view>
				<view class="cont">
					<picker mode="date" :value="dateStart" :start="startDate" :end="endDate" @change="receiveStart">
						<view class="uni-input">{{dateStart}}</view>
					</picker>
				</view>
			</view>
			<view class="grant">
				<view class="tit">领取结束时间：</view>
				<view class="cont">
					<picker mode="date" :value="dateEnd" :start="startDate" :end="endDate" @change="receiveEnd">
						<view class="uni-input">{{dateEnd}}</view>
					</picker>
				</view>
			</view> -->
			
			
			<!-- <view class="grant" style="height: auto;">
				<view class="tit">简介：</view>
				<view class="cont"><textarea row="10"></textarea></view>
			</view> -->
			<view class="btnBox"><button form-type="submit">提交</button></view>
		</view>
	</form>
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		data() {
			// 设置日期
			const currentDate = this.getDate({
				format: true
			});
			return {
				dateStart: currentDate, 
				dateEnd: currentDate, 
				Coupon:{
					title:'',       //优惠券名称
					use_con:'',     //使用条件
					amount:'',      //面额
					num:'',         //发放数量
					vtype:1,        //有效期类型
					valid_day:'',   //有效天数
					starttime:currentDate,   //有效开始时间
					endtime:currentDate,     //有效结束时间
					ftype:2,        //用户范围
					limit:'',       //限领数量
				}
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			v_type:function(e){
				this.Coupon.vtype = e.detail.value
			},
			f_type:function(e){
				this.Coupon.ftype = e.detail.value
			},
			formSubmit:function(e){
				var that = this
				let Coupon = that.Coupon
				if(Coupon.title.length <= 0){
					that.$api.msg("请输入优惠券名称")
					return false
				}
				if(Coupon.amount.length <= 0){
					that.$api.msg("请输入优惠券面额")
					return false
				}
				if(Coupon.use_con.length <= 0){
					that.$api.msg("请输入优惠券使用门槛")
					return false
				}
				if((Coupon.amount - Coupon.use_con) >= 0){
					that.$api.msg("请输入正确的面额和使用条件")
					return false
				}
				if(Coupon.num.length <= 0){
					that.$api.msg("请输入发放总数")
					return false
				}
				if(Coupon.vtype == 1){
					if(Coupon.valid_day.length <= 0){
						that.$api.msg("请输入有效天数")
						return false
					}
				}else{
					if(Coupon.starttime >= Coupon.endtime){
						that.$api.msg("请输入正确的有效时间")
						return false
					}
				}
				if(Coupon.limit.length <= 0){
					that.$api.msg("请输入正确的限领数量")
					return false
				}
				let _param = {
					token:that.userInfo.token,
					Coupon:Coupon
				}
				that.$api.postUrl(that.$api._api.ApiCouponShop,_param,function(res){
					let _data = {}
					if(typeof(res.data) == "object"){
						_data = res.data
					}else{
						_data = JSON.parse(res.data)
					}
					if(_data.status == 1){
						that.$api.msg(_data.message)
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},1500)
					}else{
						that.$api.msg(_data.message)
					}
				})
			},
			receiveStart: function(e) {
				this.dateStart = e.detail.value
			},
			receiveEnd: function(e) {
				this.dateEnd = e.detail.value
			},
			useStart: function(e) {
				this.Coupon.starttime = e.detail.value
			},
			useEnd: function(e) {
				this.Coupon.endtime = e.detail.value
			},
			// 获取年月日信息
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style lang="scss">
	.pages{margin-top: 1px;
		.grant{display: flex;padding: 0 30rpx;height: 100rpx;align-items: center;border-bottom: 1px solid #eee;background:#fff;
			.tit{font-size:26rpx;color:#333;width:200rpx;font-weight: bold;}
			.tit text{color:#999;display: block;font-size: 21rpx;font-weight: normal;}
			.cont{flex: 1;}
			.cont input{color:#333;font-size: 26rpx;}
			.inColor{font-size: 26rpx;color:#999;}
			textarea{height: 160rpx;padding:20rpx;font-size: 26rpx;color:#333;}
		}
		.btnBox{margin-top:50rpx;padding: 0 30rpx;}
		.btnBox button{background:#F04447;color:#fff;}
	}
</style>
